<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="flex: 1; height: inherit;overflow-y: auto;">
                    <el-form ref="ruleFormRef" :model="state.agentData" :rules="rules" label-width="240px">
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>零售基础设置</p>
                        </section>
                        <el-form-item class="mt10" label="零售小店默认名称：" prop="agentLevel">
                            <el-input class="width450" v-model="state.agentData.agentLevel" placeholder="代理姓名或昵称,不填写默认为小店" />
                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>零售高级设置</p>
                        </section>
                        <el-form-item label="零售店铺开启代理申请入口：">
                            <section style="display: flex; flex-direction:column;">
                                <el-switch v-model="state.agentData.agentIsRecharge" :active-value=1 :inactive-value=0 />
                                <explainBox msg="开启后小店中会出现代理申请入口，会员可申请代理，邀请人为该小店得所属代理" width='450px' color="var(--el-color-primary-light-2)" />
                            </section>
                        </el-form-item>
                        <el-form-item label="申请入口标题：" prop="agentMinRecharge">
                            <el-input class="width450" v-model="state.agentData.agentMinRecharge" placeholder="默认为：申请成为代理">
                                <template #append>元</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </section>
                <section style="text-align: center; margin:10px 0;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </section>
            </el-card>
            <AddInformation ref="addInformationRef" @selectFun="selectFun" />
            <useTypeDialog ref="useTypeDialogRef" @useTypeListFun="useTypeListFun" />
            <goodSelectDialog ref="goodSelectDialogRef" @goodsSubmitFun="goodsSubmitFun" />
        </div>
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { agentAdd } from "/@/api/agent";
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router';
const route = useRoute();
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const useTypeDialog = defineAsyncComponent(() => import('/@/components/createGoods/useTypeDialog.vue'))
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/goodSelect.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const useTypeDialogRef = ref()
const ruleFormRef = ref<FormInstance>()
const addInformationRef = ref()
const state = reactive({
	// 添加图片类型
	addFileType: '',
    agentData:{
        agentInfoId: null,
        agentLevel: null, //代理权重等级
        agentAvatar:'',
        agentName: '', // 代理级别名称
        agentPurchaseDiscount: '', // 代理进货折扣
        agentIsRecharge: 0, // 代理充值权限
        agentIsLoans: 0,//总分充值货款账户权限：
        agentMinRecharge: null,//最低充值额度
        agentJoinTask: 0,//加入任务：0无任务 1 有任务
        agentTaskType: 0,//任务类型 首进任务或者折扣任务
        agentTaskPurchase: 0,//首进对象：0总部 1上级
        agentTaskPurchaseType: 0,//首进类型：0代理选购 1组合套餐
        goodsList:[],
        agentTaskPurchaseMoney: null,//任务金额
        agentTaskPurchaseDiscountType: 0, // 收进折扣类型 0 默认折扣 1 自定义折扣
        agentTaskPurchaseDiscountValue: 0,// 首进折扣 自定义折扣数值
        agentMinPurchase: null,//最低进货额度
        agentValidMonth: null,//授权有效期
        agentPrompt: '',//注册提示语句
    },
    tableData:[{}]
})

const rules = reactive<FormRules<any>>({

})

// 使用类型选择弹窗
const addGoodsFile = () => {
    goodSelectDialogRef.value.openDialog(state.agentData.goodsList);
}

// 选中关联商品
const goodsSubmitFun = (list: any) =>{
	state.agentData.goodsList = list.map((item:any) => {return {data:item}});
}

// 图片选中
const addImg = (type: string, isArr: Number) => {
	state.addFileType = type;
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	state.agentData.agentAvatar = fileList[0]
}

// 页面加载时
onMounted(async ()  => {
    state.status == route.query.status
    if (route.query.status == 'edit') {
        
    }
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
			let params = {
                agentInfoId: state.agentData.agentInfoId,
                agentLevel: Number(state.agentData.agentLevel), //代理权重等级
                agentName: state.agentData.agentName, // 代理级别名称
                agentPurchaseDiscount: Number(state.agentData.agentPurchaseDiscount), // 代理进货折扣
                agentIsRecharge: state.agentData.agentIsRecharge, // 代理充值权限
                agentIsLoans: state.agentData.agentIsLoans,//总分充值货款账户权限：
                agentMinRecharge: Number(state.agentData.agentMinRecharge),//最低充值额度
                agentJoinTask: state.agentData.agentJoinTask,//加入任务：0无任务 1 有任务
                agentTaskType: state.agentData.agentTaskType,//任务类型 首进任务或者折扣任务
                agentTaskPurchase: state.agentData.agentTaskPurchase,//首进对象：0总部 1上级
                agentTaskPurchaseType: state.agentData.agentTaskPurchaseType,//首进类型：0代理选购 1组合套餐
                productIds:state.agentData.agentTaskPurchaseType == 1 ? state.agentData.goodsList.map((obj:any) => obj.data.skuId) : [],
                agentTaskPurchaseMoney: state.agentData.agentTaskPurchaseMoney,//任务金额
                agentTaskPurchaseDiscountType: state.agentData.agentTaskPurchaseDiscountType, // 收进折扣类型 0 默认折扣 1 自定义折扣
                agentTaskPurchaseDiscountValue: state.agentData.agentTaskPurchaseDiscountValue,// 首进折扣 自定义折扣数值
                agentMinPurchase: Number(state.agentData.agentMinPurchase),//最低进货额度
                agentValidMonth: Number(state.agentData.agentValidMonth),//授权有效期
                agentPrompt: state.agentData.agentPrompt,//注册提示语句
            }
            const { results } = await agentAdd(params);
            console.log(results)
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.el-form{
    flex:1;
    overflow-y: auto;
    position: relative;
}
.form-ele-size {
    width: 260px;
}

.line-title {
    font-size: 18px;
    padding: 8px 12px;
    background-color: #eceef0;
    border-radius: 6px;
    margin-bottom: 15px;
}

.selector-img {
    // width: 64px;
    // height: 64px;
    // border: 1px solid #ededed;
    // border-radius: 5px;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // &:hover {
    //     background-color: #f5f5f5;
    //     border: 1px solid #e4e3e3;
    // }
}
.typeBox{
    height: 65px;
    margin-right: 15px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    line-height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    span:first-child{
        font-weight: 600;
    }
    span:last-child{
        font-weight: 500;
        color: var(--el-color-info-light-3);
    }
}
.typeBoxSelected {
    border: 1px solid var(--el-color-primary);
    position: relative;
    .virtual_san{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 26px solid var(--el-color-primary);
        border-left: 26px solid transparent;
    }
    .virtual_dui{
        position: absolute;
        bottom: -2px;
        right: 2px;
        color: #fff;
        font-family: system-ui;
    }
}
.selector-img {
    width: 64px;
    height: 64px;
    border: 1px solid #ededed;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>
